<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>疫情管理系统主页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/css/main-left.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="../static/echarts/world.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        body {
            background-image: url("../static/images/222.webp");
        }
    </style>
    <script>


    </script>


</head>
<body  >
<!--主页顶部-->
<nav class="navbar navbar-default navbar-inverse" role="navigation" id="headerbar">

    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/toMain">疫情主页</a>
        </div>

        <div>
            <ul class="nav navbar-nav navbar-left">
                <li class="active"><a href="/toMain">疫情</a></li>
                <li class="active"><a href="http://localhost:86">美化版</a></li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        疫情图
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="/ToYM">疫苗图</a></li>
                        <li><a href="/ToGNYQ">国内疫情图</a></li>
                        <li><a href="/ToGWYQ">国外疫情图</a></li>
                        <li class="divider"></li>
                    </ul>
                </li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/ToRegister"><span
                        class="glyphicon glyphicon-user"></span> 注册</a></li>
                <li><a href="/login"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--主页左部-->
<div id="sidbar" class="container-fluid row">
    <div class="row col-md-3">
        <div class="col-md-9">
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li class="active">
                    <a href="/toMain">
                        <i class="glyphicon glyphicon-th-large"></i>
                        首页
                    </a>
                </li>
                <li>
                    <a href="#systemSetting" class="nav-header  collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        系统管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="systemSetting" class="nav nav-list collapse secondmenu   " style="height: 0px;">
                        <li><a href="/user/list"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
                        <!--                        <li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>-->
                        <li><a href="/PQMAP"><i class="glyphicon glyphicon-eye-open"></i>世界</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#userMeun" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-credit-card"></i>
                        疫情数据管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="userMeun" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="/MessageManager"><i class="glyphicon glyphicon-user"></i>疫情数据管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i></a></li>
                    </ul>
                </li>
                <li>
                    <a href="#articleMenu" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-globe"></i>
                        疫情爬取管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="articleMenu" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="/MessagePQ"><i class="glyphicon glyphicon-user"></i>国内疫情爬取</a></li>
                        <li><a href="/MessagePQ2"><i class="glyphicon glyphicon-th-list"></i>国外疫情爬取</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i></a></li>
                    </ul>
                </li>

                <li>
                    <a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                        <i class="glyphicon glyphicon-fire "></i>
                        关于疫情系统
                    </a>
                </li>
            </ul>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            疫情信息系统
                        </h4>
                    </div>
                    <div class="modal-body">
                        姓名： 和学博
                        学号： 18027240065
                        计算机科学与技术软件外包1班

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                $('#myModal').modal('hide')
            });
        </script>



    </div>
    <div class="col-md-9 row" >

        <div class="col-md-12" id="graph1" style="height: 500px  ;width: 100%">

            <script th:inline="javascript">
                var chinaConfirm = [[${china}]];
                var myChart = echarts.init(
                    document.getElementById('graph1'), 'white', {renderer: 'canvas'});

                let nameComparison = {
                    'Canada': '加拿大',
                    'Russia': '俄罗斯',
                    'China': '中国',
                    'United States': '美国',
                    'Singapore Rep.': '新加坡',
                    'Dominican Rep.': '多米尼加',
                    'Palestine': '巴勒斯坦',
                    'Bahamas': '巴哈马',
                    'Timor-Leste': '东帝汶',
                    'Afghanistan': '阿富汗',
                    'Guinea-Bissau': '几内亚比绍',
                    "Côted'Ivoire": '科特迪瓦',
                    'Siachen Glacier': '锡亚琴冰川',
                    "Br. Indian Ocean Ter.": '英属印度洋领土',
                    'Angola': '安哥拉',
                    'Albania': '阿尔巴尼亚',
                    'United Arab Emirates': '阿联酋',
                    'Argentina': '阿根廷',
                    'Armenia': '亚美尼亚',
                    'French Southern and Antarctic Lands': '法属南半球和南极领地',
                    'Australia': '澳大利亚',
                    'Austria': '奥地利',
                    'Azerbaijan': '阿塞拜疆',
                    'Burundi': '布隆迪',
                    'Belgium': '比利时',
                    'Benin': '贝宁',
                    'Burkina Faso': '布基纳法索',
                    'Bangladesh': '孟加拉',
                    'Bulgaria': '保加利亚',
                    'The Bahamas': '巴哈马',
                    'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
                    'Belarus': '白俄罗斯',
                    'Belize': '伯利兹',
                    'Bermuda': '百慕大',
                    'Bolivia': '玻利维亚',
                    'Brazil': '巴西',
                    'Brunei': '文莱',
                    'Bhutan': '不丹',
                    'Botswana': '博茨瓦纳',
                    'Central African Rep.': '中非共和国',
                    'Switzerland': '瑞士',
                    'Chile': '智利',
                    'Ivory Coast': '象牙海岸',
                    'Cameroon': '喀麦隆',
                    'Dem. Rep. Congo': '刚果（金）',
                    'Congo': '刚果（布）',
                    'Colombia': '哥伦比亚',
                    'Costa Rica': '哥斯达黎加',
                    'Cuba': '古巴',
                    'N. Cyprus': '北塞浦路斯',
                    'Cyprus': '塞浦路斯',
                    'Czech Rep.': '捷克',
                    'Germany': '德国',
                    'Djibouti': '吉布提',
                    'Denmark': '丹麦',
                    'Algeria': '阿尔及利亚',
                    'Ecuador': '厄瓜多尔',
                    'Egypt': '埃及',
                    'Eritrea': '厄立特里亚',
                    'Spain': '西班牙',
                    'Estonia': '爱沙尼亚',
                    'Ethiopia': '埃塞俄比亚',
                    'Finland': '芬兰',
                    'Fiji': '斐济',
                    'Falkland Islands': '福克兰群岛',
                    'France': '法国',
                    'Gabon': '加蓬',
                    'United Kingdom': '英国',
                    'Georgia': '格鲁吉亚',
                    'Ghana': '加纳',
                    'Guinea': '几内亚',
                    'Gambia': '冈比亚',
                    'Guinea Bissau': '几内亚比绍',
                    'Eq. Guinea': '赤道几内亚',
                    'Greece': '希腊',
                    'Greenland': '格林纳达',
                    'Guatemala': '危地马拉',
                    'French Guiana': '法属圭亚那',
                    'Guyana': '圭亚那',
                    'Honduras': '洪都拉斯',
                    'Croatia': '克罗地亚',
                    'Haiti': '海地',
                    'Hungary': '匈牙利',
                    'Indonesia': '印度尼西亚',
                    'India': '印度',
                    'Ireland': '爱尔兰',
                    'Iran': '伊朗',
                    'Iraq': '伊拉克',
                    'Iceland': '冰岛',
                    'Israel': '以色列',
                    'Italy': '意大利',
                    'Jamaica': '牙买加',
                    'Jordan': '约旦',
                    'Japan': '日本本土',
                    'Kazakhstan': '哈萨克斯坦',
                    'Kenya': '肯尼亚',
                    'Kyrgyzstan': '吉尔吉斯斯坦',
                    'Cambodia': '柬埔寨',
                    'Korea': '韩国',
                    'Kosovo': '科索沃',
                    'Kuwait': '科威特',
                    'Lao PDR': '老挝',
                    'Lebanon': '黎巴嫩',
                    'Liberia': '利比里亚',
                    'Libya': '利比亚',
                    'Sri Lanka': '斯里兰卡',
                    'Lesotho': '莱索托',
                    'Lithuania': '立陶宛',
                    'Luxembourg': '卢森堡',
                    'Latvia': '拉脱维亚',
                    'Morocco': '摩洛哥',
                    'Moldova': '摩尔多瓦',
                    'Madagascar': '马达加斯加',
                    'Mexico': '墨西哥',
                    'Macedonia': '马其顿',
                    'Mali': '马里',
                    'Myanmar': '缅甸',
                    'Montenegro': '黑山',
                    'Mongolia': '蒙古',
                    'Mozambique': '莫桑比克',
                    'Mauritania': '毛里塔尼亚',
                    'Malawi': '马拉维',
                    'Malaysia': '马来西亚',
                    'Namibia': '纳米比亚',
                    'New Caledonia': '新喀里多尼亚',
                    'Niger': '尼日尔',
                    'Nigeria': '尼日利亚',
                    'Nicaragua': '尼加拉瓜',
                    'Netherlands': '荷兰',
                    'Norway': '挪威',
                    'Nepal': '尼泊尔',
                    'New Zealand': '新西兰',
                    'Oman': '阿曼',
                    'Pakistan': '巴基斯坦',
                    'Panama': '巴拿马',
                    'Peru': '秘鲁',
                    'Philippines': '菲律宾',
                    'Papua New Guinea': '巴布亚新几内亚',
                    'Poland': '波兰',
                    'Puerto Rico': '波多黎各',
                    'Dem. Rep. Korea': '朝鲜',
                    'Portugal': '葡萄牙',
                    'Paraguay': '巴拉圭',
                    'Qatar': '卡塔尔',
                    'Romania': '罗马尼亚',
                    'Rwanda': '卢旺达',
                    'W. Sahara': '西撒哈拉',
                    'Saudi Arabia': '沙特阿拉伯',
                    'Sudan': '苏丹',
                    'S. Sudan': '苏丹',
                    'Senegal': '塞内加尔',
                    'Solomon Is.': '所罗门群岛',
                    'Sierra Leone': '塞拉利昂',
                    'El Salvador': '萨尔瓦多',
                    'Somaliland': '索马里兰',
                    'Somalia': '索马里',
                    'Serbia': '塞尔维亚',
                    'Suriname': '苏里南',
                    'Slovakia': '斯洛伐克',
                    'Slovenia': '斯洛文尼亚',
                    'Sweden': '瑞典',
                    'Swaziland': '斯威士兰',
                    'Syria': '叙利亚',
                    'Chad': '乍得',
                    'Togo': '多哥',
                    'Thailand': '泰国',
                    'Tajikistan': '塔吉克斯坦',
                    'Turkmenistan': '土库曼斯坦',
                    'East Timor': '东帝汶',
                    'Trinidad and Tobago': '特里尼达和多巴哥',
                    'Tunisia': '突尼斯',
                    'Turkey': '土耳其',
                    'Tanzania': '坦桑尼亚',
                    'Uganda': '乌干达',
                    'Ukraine': '乌克兰',
                    'Uruguay': '乌拉圭',
                    'Uzbekistan': '乌兹别克斯坦',
                    'Venezuela': '委内瑞拉',
                    'Vietnam': '越南',
                    'Vanuatu': '瓦努阿图',
                    'West Bank': '西岸',
                    'Yemen': '也门',
                    'South Africa': '南非',
                    'Zambia': '赞比亚',
                    'Zimbabwe': '津巴布韦',
                    'Côte d\'\Ivoire': '科特迪瓦'
                };

                var option = {
                    title: {
                        text: '\n\n全球地区累计确诊分布',
                        left: 'left',
                        textStyle: {
                            fontSize: 27,
                            color: 'black'
                        },
                    },
                    visualMap: { //左侧小导航图标
                        show: true,
                        x: 'left',
                        y: 'bottom',
                        textStyle: {
                            fontSize: 15,
                        },
                        splitList: [
                            {start: 1, end: 9},
                            {start: 10, end: 99},
                            {start: 100, end: 999},
                            {start: 1000, end: 9999},
                            {start: 10000, end: 99999},
                            {start: 100000, end: 999999},
                            {start: 1000000, end: 9999999},
                            {start: 10000000}],

                        color: ['rgba(238,26,26,0.3)', '#c77f7f', '#6a9be7', '#750000', '#930000', '#AE0000', '#CE0000', '#FF9797']
                    },
                    tooltip: {
                        show: true,
                        trigger: "item",
                        formatter: '{a} <br/>{b} : {c} ',
                        triggerOn: "mousemove|click",
                        axisPointer: {
                            type: "line"
                        },
                        textStyle: {
                            "fontSize": 14
                        },
                        "borderWidth": 0
                    },

                    series: [{
                        // 图标类型为 地图
                        type: 'map',
                        name: '累计确诊人数',
                        nameMap: nameComparison,
                        roam: true,
                        label: {
                            show: true,
                            position: "top",
                            margin: 8
                        },
                        mapType: 'world',
                        "zoom": 1,
                        // 去除各个国家上的小红点
                        showLegendSymbol: false,
                        itemStyle: {		//图形样式
                            normal: {
                                borderWidth: .3,//区域边框宽度
                                borderColor: '#009fe8',//区域边框颜色
                                areaColor: '#ffefd5',       //区域颜色
                            },
                            emphasis: {      //鼠标滑过地图高亮的相关设置
                                borderWidth: .5,
                                borderColor: '#4b0082',
                                areaColor: '#fff',
                            }
                        },
                        data: [{name: '中国', value: chinaConfirm}],
                    }],
                };
                //世界个国家数据注入
                var countries = [[${datalist}]];
                for (var country of countries) {
                    option.series[0].data.push({
                        name: country.area,
                        value: country.nowConfirm
                    })
                }

                myChart.setOption(option);
myChart.resize();

            </script>
        </div>
    </div>

</div>
<div>
    <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
    <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
    <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
    <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
</div>
<!--<div class="flourish-embed flourish-bar-chart-race" data-src="visualisation/9309511"><script src="https://public.flourish.studio/resources/embed.js"></script></div>-->
</body>
</html>